<template>
    <div class="nav">
        <el-row class="tac">
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                :default-active="$route.path" :default-openeds="['/student']" text-color="#fff" :router="true">
                <Menu :menuList="menuNodes" />
            </el-menu>

        </el-row>
    </div>
</template>
<script setup lang="ts">
import { GoldMedal, OfficeBuilding, SwitchFilled } from '@element-plus/icons-vue';
import Menu from "./menu/index.vue";
import menuList from '@/config/menuConfig';
import { useRoute } from 'vue-router';
const $route = useRoute();
//引入小仓库
import useUserStore from '@/store/modules/user';
import type { MenuData } from './type/MenuData';
const userStore = useUserStore();
//判断当前用户是否拥有此权限，判断当前这个菜单项是否需要展示
const hasAuth = (item:MenuData)=>{
    //当前菜单项中解构出Index和isPublic
    const {index,isPublic} = item;
    //获取对当前扽古用户的权限列表
    const menus = userStore.user?.role.menus;
    //获取当前登录用户的用户名
    const username = userStore.user?.username;
    /* 
        当前菜单项需要展示的条件
        1.如果登陆的是超级管理员
        2.isPublic为true
        3.当前登录的用户群贤数组中包含此项
    */
   if(username == "admin" || isPublic == true || menus?.indexOf(index) != -1){
    return true;
   }else{
    return false;
   }
};
//定义一个数组，用于存储所有需要展示的菜单项(拥有权限的菜单项)
let menuNodes:any[] = [];
//过滤需要展示的菜单项
const getMenuNodes = ()=>{
    //循环遍历所有菜单项数组，拿每一个菜单项对象调用hasAuth方法判断
    //如果返回true代表需要展示，就添加到menuNodes中，那么循环结束之后menuNodes数组中
    //存储的就是素有需要展示的菜单项了
    menuList.forEach(item=>{
        //一级菜单项
        if(!item.children){
            //拥有此权限,需要展示这个菜单项
            if(hasAuth(item)){
                menuNodes.push(item)
            }
        }else{
            //定义数组用户存储子级菜单项
            let arr:any[] = [];
            item.children.forEach(child=>{
                if(hasAuth(child)){
                    arr.push(child)
                }
            })
            //将拥有二级菜单的一级菜单与自己的二级菜单合并
            let obj = {...item,children:arr}
            menuNodes.push(obj)
        }
    })
}
getMenuNodes()   

</script>
<style>
.el-menu-vertical-demo {
    border: 0;
    width: 230px;
}
</style>